<template>
  <el-card class="upload-card">
    <h2 class="title">上传玉米叶片图片</h2>
    <el-upload
        class="upload-demo"
        drag
        action=""
        :http-request="uploadImage"
        :show-file-list="false"
    >
      <div class="upload-content">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">拖拽图片或<em>点击上传</em></div>
        <div class="el-upload__tip">支持 JPG/PNG 格式，大小不超过 5MB</div>
      </div>
    </el-upload>

    <transition name="fade">
      <div v-if="preview" class="preview">
        <div class="preview-header">
          <span>图片预览</span>
          <el-button size="small" @click="preview = null">清除</el-button>
        </div>
        <img :src="preview" alt="预览图" />
      </div>
    </transition>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['result'])
const preview = ref(null)

async function uploadImage(option) {
  const file = option.file
  preview.value = URL.createObjectURL(file)

  const formData = new FormData()
  formData.append('file', file)

  try {
    // 发送三个并行请求
    const [t2tResult, vitLiteResult, vitBaseResult] = await Promise.all([
      axios.post('http://localhost:8001/predictt2t', formData),
      axios.post('http://localhost:8001/predictlite', formData),
      axios.post('http://localhost:8001/predictbase', formData)
    ]);

    // 中文标签映射
    const labelMap = {
      blight: '枯萎病',
      common_rust: '普通锈病',
      gray_spot: '灰斑病',
      spray: '农药喷洒'
    };

    // 转换预测结果
    const transformedData = {
      prediction: labelMap[t2tResult.data.prediction] || t2tResult.data.prediction,
      confidence: t2tResult.data.confidence,
      elapsed_ms: t2tResult.data.elapsed_ms,
      // 各模型的概率分布
      t2tProbabilities: mapKeysToChinese(t2tResult.data.probabilities, labelMap),
      vitLiteProbabilities: mapKeysToChinese(vitLiteResult.data.probabilities, labelMap),
      vitBaseProbabilities: mapKeysToChinese(vitBaseResult.data.probabilities, labelMap)
    };

    emit('result', transformedData);
  } catch (error) {
    console.error('上传失败:', error);
    ElMessage.error('图片上传失败，请重试');
  }
}

// 辅助函数：将概率对象的键转换为中文
function mapKeysToChinese(probabilities, labelMap) {
  return Object.keys(probabilities).reduce((acc, key) => {
    const chineseKey = labelMap[key] || key;
    acc[chineseKey] = probabilities[key];
    return acc;
  }, {});
}
</script>

<style scoped>
.upload-card {
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.upload-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.title {
  text-align: center;
  color: #2c6e49;
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 1.4rem;
}

.upload-content {
  padding: 30px 0;
}

:deep(.el-upload) {
  width: 100%;
}

:deep(.el-upload-dragger) {
  background-color: #f8fff6;
  border: 2px dashed #4caf50;
  border-radius: 10px;
  padding: 30px;
  transition: all 0.3s ease;
}

:deep(.el-upload-dragger:hover) {
  background-color: #edf8e9;
  border-color: #2c6e49;
}

:deep(.el-icon-upload) {
  font-size: 60px;
  color: #4caf50;
  margin-bottom: 15px;
}

:deep(.el-upload__text) {
  font-size: 16px;
  color: #555;
}

:deep(.el-upload__text em) {
  color: #2c6e49;
  font-style: normal;
  font-weight: 500;
}

.el-upload__tip {
  margin-top: 10px;
  font-size: 13px;
  color: #888;
  text-align: center;
}

.preview {
  margin-top: 25px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: white;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #f0f7ee;
  border-bottom: 1px solid #e4efe0;
  font-weight: 500;
  color: #2c6e49;
}

.preview img {
  display: block;
  max-width: 100%;
  max-height: 300px;
  margin: 0 auto;
  padding: 15px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>